<template>
  <div class="allocation">
    <el-form :model="formInline" ref="ruleForm" label-width="80px">
      <el-form-item label="子公司" prop="user_name">
        <el-select
          v-model="formInline.companyIndex"
          placeholder="选择要分配的子公司"
          @change="selectCompany"
          clearable
        >
          <el-option
            v-for="(item, index) in subCompanyList"
            :key="index"
            :label="item.branch_company"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务员" prop="user_name">
        <el-select
          v-model="formInline.businessIndex"
          placeholder="选择要分配的业务员"
          @change="selectBusiness"
          clearable
        >
          <el-option
            v-for="(item, index) in businessUserList"
            :key="index"
            :label="item.business_user_name"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="allocation">分配</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getAllSubCompany,
  getBusinessUser,
  allocationBusiness
} from "@/api/business";
export default {
  name: "allocation",
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      businessUserList: [],
      subCompanyList: [],
      form: {
        business_user_id: "",
        business_user_name: "",
        branch_company_id: "",
        branch_company: ""
      },
      formInline: {
        companyIndex: "",
        businessIndex: ""
      },
      rules: {
        // companyIndex: [
        //   { required: true, message: "请选择法人", trigger: "change" }
        // ],
        // businessIndex: [{ required: true, message: "请输入法人手机号", trigger: "change" }],
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      let result = await getAllSubCompany();
      if (result.code == 200) {
        this.subCompanyList = result.data;
      }

      let result2 = await getBusinessUser();
      if (result2.code == 200) {
        this.businessUserList = result2.data;
      }

      //进行数据回显
      if (this.row.branch_company) {
        this.formInline.companyIndex = this.subCompanyList.findIndex(
          item => item.branch_company == this.row.branch_company
        );
        this.form.branch_company = this.row.branch_company;
        this.form.branch_company_id = this.row.branch_company_id;
      }

      if (this.row.business_user_name) {
        this.formInline.businessIndex = this.businessUserList.findIndex(
          item => item.business_user_name == this.row.business_user_name
        );
        this.form.business_user_name = this.row.business_user_name;
        this.form.business_user_id = this.row.business_user_id;
      }
    },
    selectCompany(val) {
      if (val === "") {
        //点击取消
        this.form.branch_company_id = "";
        this.form.branch_company = "";
      } else {
        //选择了数据
        this.form.branch_company_id = this.subCompanyList[
          val
        ].branch_company_id;
        this.form.branch_company = this.subCompanyList[val].branch_company;
      }
    },
    selectBusiness(val) {
      if (val === "") {
        //点击取消
        this.form.business_user_id = "";
        this.form.business_user_name = "";
      } else {
        //选择了数据
        this.form.business_user_id = this.businessUserList[
          val
        ].business_user_id;
        this.form.business_user_name = this.businessUserList[
          val
        ].business_user_name;
      }
    },
    //分配
    async allocation() {
    //   if (Object.values(this.formInline).every(item => item === "")) {
    //     //都为空 提示必须选择一个数据
    //     this.$message.error("请选择要分配的子公司或业务员");
    //     return;
    //   }
      let result = await allocationBusiness({
        id: this.row.id,
        ...this.form
      });
      if (result.code == 200) {
        this.$message.success("分配成功");
        this.$emit("refresh");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.allocation {
}
</style>
